import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import {
  APP_BLACK,
  APP_RED,
  APP_GRAY,
  APP_SECOND_GREY
} from '../../../../constant/color';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  content: {
    flex: 1,
    backgroundColor: '#F7F7F8'
  },
  scroll: {
    paddingBottom: phonePx(12)
  },
  sku: {
    backgroundColor: '#ffffff'
  },
  first: {
    marginTop: phonePx(12)
  },
  skuName: {
    width: phonePx(290),
    fontSize: phonePx(13),
    color: APP_BLACK,
    fontWeight: '400',
    lineHeight: phonePx(18),
    marginTop: phonePx(15),
    marginLeft: phonePx(16)
  },
  number: {
    fontSize: phonePx(12),
    color: APP_GRAY,
    fontWeight: '400',
    lineHeight: phonePx(17),
    marginTop: phonePx(2),
    marginBottom: phonePx(12),
    marginLeft: phonePx(16)
  },
  skuPrice: {
    position: 'absolute',
    top: phonePx(18),
    right: phonePx(16),
    fontSize: phonePx(12),
    color: APP_BLACK,
    fontWeight: '500',
    lineHeight: phonePx(17)
  },
  total: {
    height: phonePx(39),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor: '#ffffff'
  },
  totalNum: {
    fontSize: phonePx(12),
    color: APP_GRAY,
    fontWeight: '400'
  },
  totalPrice: {
    marginLeft: phonePx(12),
    fontSize: phonePx(12),
    color: APP_BLACK,
    fontWeight: '400',
    marginRight: phonePx(16)
  },
  specialPrice: {
    fontWeight: '500'
  },
  payMethod: {
    height: phonePx(41),
    backgroundColor: '#ffffff',
    marginTop: phonePx(12),
    justifyContent: 'center'
  },
  payMethodDesc: {
    fontSize: phonePx(13),
    color: APP_GRAY,
    fontWeight: '400',
    marginLeft: phonePx(16)
  },
  payMethodContent: {
    height: phonePx(41),
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  payMethodIcon: {
    marginLeft: phonePx(16),
    width: phonePx(16),
    height: phonePx(15),
    alignItems: 'center',
    justifyContent: 'center'
  },
  methodDesc: {
    fontSize: phonePx(13),
    color: APP_BLACK,
    fontWeight: '400',
    marginLeft: phonePx(8)
  },
  selectedContent: {
    position: 'absolute',
    right: phonePx(16),
    height: phonePx(16),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  selectedStatusCoin: {
    width: phonePx(16),
    height: phonePx(16)
  },
  coinDesc: {
    fontSize: phonePx(12),
    color: APP_BLACK,
    fontWeight: '500',
    marginRight: phonePx(10)
  },
  priceInfo: {
    height: phonePx(60),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  priceContent: {
    flexDirection: 'row',
    marginLeft: phonePx(16),
    alignItems: 'center',
    justifyContent: 'center'
  },
  priceDesc: {
    fontSize: phonePx(14),
    color: APP_SECOND_GREY,
    fontWeight: '500'
  },
  price: {
    fontSize: phonePx(20),
    color: APP_RED,
    fontWeight: '500'
  },
  symbol: {
    fontSize: phonePx(14),
    color: APP_RED,
    fontWeight: '500'
  },
  pay: {
    width: phonePx(98),
    height: phonePx(40),
    backgroundColor: APP_RED,
    borderRadius: phonePx(4),
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: phonePx(16)
  },
  payDesc: {
    fontSize: phonePx(14),
    color: '#fff',
    fontWeight: '500'
  }
});
